<template>
    <div>
        <h1>食谱添加</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>菜谱标题</td>
                    <td>
                        <input type="text" v-model="emp.Caibiaoti">
                    </td>
                </tr>
                <tr>
                    <td>菜谱封面</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="emp.Fengmian" width="100" height="100" v-if="emp.Fengmian!=''">
                    </td>
                </tr>
                <tr>
                    <td>标签</td>
                    <td>
                        <input type="text" v-model="emp.Biaoqian">
                    </td>
                </tr>
                <tr>
                    <td>分类</td>
                    <td>
                        <select v-model="emp.Fenlei">
                            <option value="">请选择</option>
                            <option :value="item.Fname" v-for="item in fen" :key="item.Id">{{item.Fname}}</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td>发布类型</td>
                    <td>
                        <input type="radio" name="Leixng" :value="true" v-model="emp.Leixng">立即发布
                        <input type="radio" name="Leixng" :value="false" v-model="emp.Leixng">预定发布
                    </td>
                </tr>
                <tr>
                    <td> 发布日期</td>
                    <td>
                        <input type="date" v-model="emp.FaTime">--
                        <input type="time" v-model="emp.Shijian">
                    </td>
                </tr>
                <tr>
                    <td>菜谱详情</td>
                    <td>
                        <textarea cols="50" role="5" v-model="emp.Xiangqing"></textarea>
                    </td>
                </tr>
            
                <tr>
                    <td></td>
                    <td>
                        <button class="btn btn-success" @click="add">添加</button>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted } from 'vue';
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import moment from 'moment';

const router=useRouter();
const route=useRoute();

let fen:any=ref([])


let emp:any=reactive({
  "Caibiaoti": "",
  "Fengmian": "",
  "Biaoqian": "",
  "Fenlei": "",
  "Leixng": true,
  "FaTime": "",
  "Shijian": "",
  "Xiangqing": "",
})

onMounted(()=>{
    fenlei()
})


//添加
const add=()=>{
    console.log(emp);

    if(emp.Caibiaoti==''){
        alert('菜谱标题不能为空')
        return;
    }
    if(emp.Fengmian==''){
        alert('菜谱封面不能为空')
        return;
    }
    if(emp.Biaoqian==''){
        alert('标签不能为空')
        return;
    }
    if(emp.Fenlei==''){
        alert('分类不能为空')
        return;
    }
    if(emp.Xiangqing==''){
        alert('菜谱详情不能为空')
        return;
    }

    axios({
        url:'/api/House/AddCapu',
        method:'post',
        data:emp
    }).then(res=>{
        console.log(res);
        if(res.data>0){
            alert('添加成功')
            router.push('/caipuList')
            return;
        }else if(res.data==-1){
            alert('菜谱标题已存在')
            return;
        }
        else{
            alert('添加失败')
            return;
        }
        
    }).catch(err=>{
        console.log(err);
        
    })
    
}

//获取图片
const img=(e:any)=>{
    console.log(e);
    var t=e.target.files[0]
    var f=new FormData()
    f.append('file',t)
    axios({
        url:'/api/Imgse/Imgse',
        method:'post',
        data:f
    }).then(res=>{
        console.log(res);
        if(res.data=='图片格式不正确'){
            alert('图片格式不正确')
            return;
        }else if(res.data=='图片图片大于2m')
        {
            alert('图片图片大于2m')
            return;
        }

        emp.Fengmian=res.data

        
    }).catch(err=>{
        console.log(err);
        
    })
}


//获取分类值
const fenlei=()=>{
    console.log(fen);
    axios({
        url:'/api/House/FenleiList',
        method:'get',
        
    }).then(res=>{
        console.log(res);
        fen.value=res.data
       
    }).catch(err=>{
        console.log(err);
        
    })
}

</script>

<style scoped>

</style>